<!--
 * @Description:
 * @Author: zhaolei
 * @Date: 2023-04-13 12:24:10
-->
<template>
  <el-dialog
    title="评论列表"
    :visible.sync="visible"
    width="80%"
    append-to-body
  >
    <avue-crud
      ref="crud"
      v-model="form"
      :page.sync="page"
      :data="tableData"
      :table-loading="tableLoading"
      :option="tableOption"
      @on-load="getList"
      @search-change="searchChange"
      @search-reset="searchReset"
    >
      <template
        slot="menu"
        slot-scope="scope"
      >
        <el-button
          type="text"
          size="small"
          icon="el-icon-delete"
          @click="shield(scope.row, scope.index)"
        >
          屏蔽
        </el-button>
        <el-button
          type="text"
          size="small"
          icon="el-icon-delete"
          @click="recover(scope.row, scope.index)"
        >
          恢复
        </el-button>
      </template>
    </avue-crud>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex';
import crudMixins from '@/mixins/crud';
import { tableOption } from '@/const/crud/content/commentList';
export default {
  name: 'commentPopup',
  mixins: [crudMixins],
  props: {
    id: {
      type: [Object, String],
    },
    value: {
      type: Boolean,
      default: false,
    },
    dataObj: { type: [Object] },
  },
  data() {
    return {
      form: {},
      loading: false,
      tableOption: tableOption(),
      feature: ['黏人乖巧', '傲娇', '乖巧'],
    };
  },
  computed: {
    visible: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    },
    ...mapGetters(['userInfo', 'access_token']),
  },
  watch: {
    visible() {
      this.form = { ...this.dataObj };
    },
  },
  methods: {
    shield(row) {
      this.$confirm(
        '【屏蔽后该评论在移动用户端将不可见，是否确定屏蔽该评论？】',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(function () {
          // return delObj(row.id);
        })
        .then(() => {
          this.$message.success('操作成功');
          this.getList();
        });
    },
    recover(row) {
      this.$confirm(
        '【恢复后该评论在移动用户端将可见，是否确定恢复该评论？】',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(function () {
          // return delObj(row.id);
        })
        .then(() => {
          this.$message.success('操作成功');
          this.getList();
        });
    },
    // 列表查询
    getList(page, params) {
      // this.tableLoading = true;
      this.tableData = [{}];
      // fetchList()
      // // Object.assign(
      // //   {
      // //     current: this.page.currentPage,
      // //     size: this.page.pageSize,
      // //   },
      // //   params,
      // //   this.searchForm
      // // )
      //   .then((response) => {
      //     this.tableData = response.data.data.records;
      //     this.page.total = response.data.data.total;
      //     this.tableLoading = false;
      //   })
      //   .catch(() => {
      //     this.tableLoading = false;
      //   });
    },
  },
};
</script>

<style lang='scss' scoped>
.tags-item {
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px solid rgba(161, 216, 230, 1);
  color: rgba(161, 216, 230, 1);
  margin-right: 20px;
}
.mb-20 {
  margin-bottom: 20px;
}
.tags-title {
  width: 80px;
  text-align: right;
}
</style>
